<template>
  <div>
    <!--工具类-->

    <Row style="padding-top: 10px;text-align: left" >
      <i-col span="24" class-name="y_query_right">
          <Input v-model.trim="searchParams.orderSerialNumber" placeholder="请输入订单流水号" clearable
                 class="y_condition"></Input>
          <Select v-model="searchParams.isProcess" placeholder="请选择处理状态"  class="y_condition" clearable style="text-align: left;">
            <Option :value="0" :key="0" >未处理</Option>
            <Option :value="1" :key="1">已处理</Option>
          </Select>
          <Button type="primary" class="y_condition" icon="ios-search" @click="search">查询
          </Button>

      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :columns="tableTitles" :data="packageAftersaleList" class="table_css"-->
<!--           no-data-text="暂无数据" ></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="packageAftersaleList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in packageAftersaleList">
        <div style="width:100%;padding: 0 0.5rem;">
          <Row type="flex" justify="space-between" align="middle">
            <i-col :xs="24" :sm="21" style="text-align: left;padding-left: 1rem;" >
              <div style="width:100%;padding:0.3rem 0;">
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView v-if="$authority('ORDER-1-205')"  title="订单流水号" v-has=tRole.ORDER_2_205 >
                  <a @click="showOrderDetail(item.orderId)" target="_blank">{{item.serialNumber}}</a>
                </KeyValueView>
                <KeyValueView v-else title="订单流水号" v-has=tRole.ORDER_2_205>{{item.serialNumber}}</KeyValueView>
                <KeyValueView title="运单号">{{item.waybill}}</KeyValueView>
                <KeyValueView title="售后类型">{{getType(item.type)}}</KeyValueView>
              </div>

              <div style="width:100%;padding:0.3rem 0;">
                <KeyValueView title="用户编号">{{item.encodeName}}</KeyValueView>
                <KeyValueView title="提交时间" >{{$tiyBJTime(item.createtime)}}</KeyValueView>
                <KeyValueView title="处理时间" >{{isEmpty(item.processTime)?'无':$tiyBJTime(item.processTime)}}</KeyValueView>
              </div>

            </i-col>
            <i-col :xs="24" :sm="3" align="right" >
            <Button v-if="!isEmpty(item.processTime)" v-has=tRole.ORDER_2_100 ghost size="small" type="info" icon="ios-information-circle-outline" @click="getPackageAftersale(item.id,item.orderId)"  >查看</Button>
            <Button v-if="isEmpty(item.processTime)"  v-has=tRole.ORDER_2_100 ghost size="small" type="success" icon="ios-hand" @click="getPackageAftersale(item.id,item.orderId)"  >处理</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>

    <!-- 包裹售后服务详情 -->
    <Modal v-model="status.modalDetail.isShow"
           title="包裹售后服务信息"
           :styles="{top: '20px',bottom:'20px',width:'72%',}" :scrollable=false>
      <div slot="footer"></div>
      <div>
        <Row>
          <Card style="margin-right: 20px;width:100%">
            <p slot="title">
              基本信息
            </p>
            <div>
              <Row>
                <i-col span="10" class="y_wordwrap"><span class="tiy_key">订单编号 :</span> {{packageAftersale.serialNumber}}</i-col>
                <i-col span="10" offset="2"><span class="tiy_key">申请用户 :</span> {{packageAftersale.userName}}</i-col>
              </Row>
              <Row>
                <i-col span="10"><span class="tiy_key">运单号 :</span> {{packageAftersale.waybill}}</i-col>
                <i-col span="10" offset="2"><span class="tiy_key">包裹状态 : </span>{{packageAftersale.typeTitle}}</i-col>
              </Row>
              <Row>
                <i-col span="10"><span class="tiy_key">提交时间 :</span> {{packageAftersale.createtime}}</i-col>
                <i-col span="10" offset="2"><span class="tiy_key">处理完成时间 ：</span>{{packageAftersale.processTime}}</i-col>
              </Row>
              <Row v-if="packageAftersale.type === 100 && packageAftersale.processTime != null && packageAftersale.processTime !== ''">
                <i-col span="8" ><span class="tiy_key">处理结果 ：</span>	{{packageAftersale.resultTitle}}</i-col>
              </Row>
            </div>
          </Card>
        </Row>
        <Row style="margin-top:8px;" v-if="packageAftersale.type == 100 && (packageAftersale.processTime == null || packageAftersale.processTime == '')">
          <i-col span="3" >
            <Button type="primary" @click="toUnReceived()" icon="ios-download-outline" v-has=tRole.ORDER_2_101>处理</Button>
          </i-col>
        </Row>
        <Row v-if="packageAftersale.type == 101" >
<!--          <Table stripe border :context="this" :columns="tableAftersaleItem" :data="packageAftersale.itemAftersales"-->
<!--                 class="table_css" no-data-text="暂无数据" style="margin:1rem 0px;"></Table>-->
          <List style="border-top: 1px solid #e8eaec;margin-top: 1rem;width: 100%;" >
            <list-item class="list_item" v-for="(item,index) in packageAftersale.itemAftersales">
              <div style="width:100%;padding: 0 0.5rem;"  >
                <Row type="flex" justify="space-between" align="middle" >
                  <i-col  :xs="5" :sm="2" style="text-align: left">
                    <img :src="getProductZipImage(item.orderItem)"
                         style="width:99%;max-width:80px;max-height:80px;"
                         @click="status.modalImage.url=yunPath+item.orderItem.originalImagePath;status.modalImage.isShow = true;"/>
                  </i-col>
                  <i-col :xs="19" :sm="19" style="text-align: left;padding-left: 1rem;" >
                    <KeyValueView>#{{index+1}}</KeyValueView>
                    <KeyValueView title="SKU">
                      <a :href="$tiyProductUrl(item.orderItem.productCode)" target="_blank">{{item.orderItem.productCode}}</a>
                    </KeyValueView>
                    <KeyValueView title="色卡">{{item.orderItem.color}}</KeyValueView>
                    <KeyValueView title="尺码">{{item.orderItem.sizeName}}</KeyValueView>

                    <div style="width:100%;padding:0.3rem 0;">
                      <KeyValueView title="售后类型">
                        {{item.type==null?'':aftersaleTypeDict.filter(itemDict => itemDict.value == item.type)[0].name}}
                      </KeyValueView>
                      <KeyValueView title="处理结果">
                        {{item.result==null?'':aftersaleProcessTypeDict.filter(itemDict => itemDict.value == item.result)[0].name}}
                      </KeyValueView>
                      <KeyValueView title="处理人">{{item.handlerName}}</KeyValueView>
                    </div>
                  </i-col>
                  <i-col :xs="24" :sm="3" align="right">
                    <Button v-if="item.processTime" v-has=tRole.ORDER_2_102 ghost size="small" type="info" icon="ios-information-circle-outline" @click="toAftersaleItem(item)"  >查看</Button>
                    <Button v-if="!item.processTime"  v-has=tRole.ORDER_2_102 ghost size="small" type="success" icon="ios-hand" @click="toAftersaleItem(item)"  >处理</Button>
                  </i-col>
                </Row>
              </div>
            </list-item>
          </List>
        </Row>
      </div>
    </Modal>

    <Modal v-model="status.modalUnReceived.isShow" title="未收到货物包裹售后处理" :closable="false"
           :mask-closable="false" @on-ok="handlerUnReceived('paramUnReceived')" :loading="status.modalUnReceived.isLoading">
      <Form ref="paramUnReceived" :model="paramUnReceived" :label-width="100" class="modal_form" :rules="rules.ruleUnReceived">
        <FormItem label="处理:" prop="result" required>
          <Select v-model="paramUnReceived.result" placeholder="请选择" :label-in-value=true
                  class="modal_form_input" @on-change="changeUnreceivedHandlerResult">
            <Option v-for="item in aftersaleProcessTypeDict" v-if="item.value != 201 && item.value != 501 && item.value != 700"
                    :value="item.value" :key="item.value">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="退款金额:" prop="refundAmount" v-if="paramUnReceived.result == 101" required>
          <Input v-model.trim="paramUnReceived.refundAmount" number placeholder="请输入" class="modal_form_input" ></Input>
        </FormItem>
        <FormItem label="补充回复:" prop="opinion" v-if="paramUnReceived.result == 101 || paramUnReceived.result == 401">
          <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model.trim="paramUnReceived.opinion" ></Input>
        </FormItem>
        <FormItem label="快递公司" prop="deliveryCompany" v-if="paramUnReceived.result == 301" required>
          <Select v-model="paramUnReceived.deliveryCompany" placeholder="请选择" :label-in-value=true
                  class="modal_form_input">
            <Option v-for="item in deliverCompanyList" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="运送单号:" prop="waybill" v-if="paramUnReceived.result == 301" required>
          <Input v-model.trim="paramUnReceived.waybill" class="modal_form_input"></Input>
        </FormItem>
      </Form>

    </Modal>

    <!--单项产品售后处理-->
    <Modal v-model="status.modalAftersaleItem.isShow" title="单项产品售后处理"   :styles="{width:'60%'}"
           :mask-closable="false" :loading="status.modalAftersaleItem.isLoading">
      <Form ref="paramAftersaleItem" :model="paramAftersaleItem" :label-width="110" class="modal_form"
            :rules="rules.ruleAftersaleItem">

          <Card style="margin-right: 20px;width:100%">
            <p slot="title">
              申请信息
            </p>
            <div>
              <Row>
                <i-col span="12"><span class="tiy_key">产品编码 :</span> {{paramAftersaleItem.orderItem.productCode}}</i-col>
                <i-col span="12"><span class="tiy_key">产品实付单价 :</span> ${{paramAftersaleItem.orderItem.actualPrice}}</i-col>
              </Row>

              <Row>
                <i-col span="12"><span class="tiy_key">申请售后数量 :</span> {{paramAftersaleItem.number}}</i-col>
                <i-col span="12"><span class="tiy_key">售后类型 :</span> {{requestType2Name(paramAftersaleItem.type)}}</i-col>

              </Row>
                <span class="tiy_key">申请原因 :</span> {{paramAftersaleItem.cause}}
              <Row>
                <span class="tiy_key">售后凭证(附件) : {{paramAftersaleItem.certificate.length<=0?'暂无':''}}</span>
                <img v-for=" item in paramAftersaleItem.certificate" :src="item"  style="max-width: 100px;max-height: 50px; margin: 0.5rem;"
                     @click="status.modalImage.url=item;status.modalImage.isShow = true;"/>
              </Row>

            </div>
          </Card>

        <br/>
        <Card style="margin-right: 20px;width:100%;">
          <p slot="title">
            处理意见
          </p>
          <p  v-if="paramAftersaleItem.processTime">
            <span class="tiy_key">售后状态 ：</span> <Tag :color="!paramAftersaleItem.processTime?'red':'green'"  >{{!paramAftersaleItem.processTime?'待处理':'已处理完毕'}}</Tag>
             </p>
          <Row>
            <i-col span="12">
              <FormItem label="处理结果：" prop="result" required  v-if="!paramAftersaleItem.processTime">
                <Select v-model="paramAftersaleItem.result" placeholder="请选择" :label-in-value=true
                        class="modal_form_input" @on-change="changeItemHandlerResult">
                  <Option v-for="item in aftersaleProcessTypeDict" v-if="item.value != 301 && item.value != 401 && item.value < 600"
                          :value="item.value" :key="item.value">{{item.name}}</Option>
                </Select>
              </FormItem>
              <p v-else><span class="tiy_key">处理结果 ：</span> {{resultType2Name(paramAftersaleItem.result)}}</p>
            </i-col>
            <i-col span="12">
              <FormItem label="退款金额($):" prop="refundAmount" required v-if="paramAftersaleItem.result===101&&!paramAftersaleItem.processTime" >
                <Input v-model.trim="paramAftersaleItem.refundAmount" number placeholder="请输入" class="modal_form_input"  ></Input>
              </FormItem>
              <p v-else-if="paramAftersaleItem.processTime"><span class="tiy_key">退款金额 ：</span> {{paramAftersaleItem.refundAmount===0||paramAftersaleItem.refundAmount===null?'无退款':'$'+paramAftersaleItem.refundAmount}}</p>
            </i-col>
          </Row>
          <FormItem label="补充回复:" prop="opinion" v-if="!paramAftersaleItem.processTime" >
            <Input type="textarea" :autosize="{minRows: 3,maxRows: 6}" v-model="paramAftersaleItem.opinion" placeholder="可选"></Input>
          </FormItem>
          <p v-else><span class="tiy_key">补充回复 ：</span> {{paramAftersaleItem.opinion}}</p>

          <Row style="text-align: right" v-if="!paramAftersaleItem.processTime">

            <Button type="primary"
                    :loading="status.modalAftersaleItem.submitLoading" @click="handlerAftersaleItem('paramAftersaleItem')">保存处理结果</Button>
          </Row>

        </Card>
      </Form>
      <div slot="footer"></div>
    </Modal>

    <!--查看图片弹出框-->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
    </Modal>
    <!--查看订单详情-->
    <a-OrderDetail  ref="orderDetail" @hideDetail="hideDetail()" :orderId="orderId" :detailShow="isShowDetail" v-show="isShowDetail" > </a-OrderDetail>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/refund/refund_data"
  import AOrderDetail from "../order/OrderDetail.vue"
  import {
    init,
    webList,
    getPackageAftersale,
    toUnReceived,
    handlerUnReceived,
    toAftersaleItem,
    handlerAftersaleItem
  } from "./js/refund/refund_funs"
  import KeyValueView from "../widgets/KeyValueView";
  import {isEmpty} from "../js/commonUtils";

  export default {
    components: {ICol,AOrderDetail,KeyValueView},
    data(){
      return {
        tRole:{//权限
          ORDER_2_100:"ORDER-2-100",
          ORDER_2_101:"ORDER-2-101",
          ORDER_2_102:"ORDER-2-102",
          ORDER_2_205:"ORDER-1-205",
        },
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams.searchParams,
        paramUnReceived : tiyData.tParams.unReceived,
        paramAftersaleItem:tiyData.tParams.aftersaleItem,
        packageAftersaleList:tiyData.tData.packageAftersaleList,
        orderStateDict: this.$store.getters.dictionaries.orderStateDict,
        packageStateDict: this.$store.getters.dictionaries.packageStateDict,
        orderItemStateDict: this.$store.getters.dictionaries.orderItemStateDict,
        deliverCompanyList: this.$store.getters.dictionaries.deliverCompanyList,
        aftersaleTypeDict : this.$store.getters.dictionaries.aftersaleTypeDict,
        aftersaleProcessTypeDict : this.$store.getters.dictionaries.aftersaleProcessTypeDict,
        yunPath: this.$store.getters.imgPrefix,
        tData: tiyData.tData,
        rules: tiyData.tStatus.rules,
        tableTitles: tiyData.tableTitles(this),
        packageAftersale:tiyData.tData.packageAftersale,
        tableAftersaleItem :[
          tiyData.tTable.tableAftersaleItem.rowIndex,
          tiyData.tTable.tableAftersaleItem.rowCode,
          tiyData.tTable.tableAftersaleItem.rowPic(this),
          tiyData.tTable.tableAftersaleItem.rowColorName,
          tiyData.tTable.tableAftersaleItem.rowSizeName,
          tiyData.tTable.tableAftersaleItem.rowType(this),
          tiyData.tTable.tableAftersaleItem.rowResult(this),
          tiyData.tTable.tableAftersaleItem.rowProcesser,
          tiyData.tTable.tableAftersaleItem.rowOpertion(this)
        ],
        isShowDetail:false,
        orderId:''
      }
    },
    computed : {

    },
    methods: {
      getType(type){
        let str ='';
        if(type == 101){
          str = '已收到货物';
        }else if(type == 100){
          str = '未收到货物';
        }
        return str;
      },
      isEmpty(val) {
        return isEmpty(val);
      },
      getProductZipImage(product){
        let imageUrl = this.yunPath+product.originalImagePath;
        let self=this;
        if(product!=null&&product.zipImages!=null){
          imageUrl=this.yunPath+product.zipImages[0].imagePath
        }
        return !imageUrl ? '' : imageUrl;
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      requestType2Name(type){

        let index = this._.findIndex(this.aftersaleTypeDict,function (item) {
            return type===item.value;
        });

        if (index===-1){
          return '';
        } else{
          return this.aftersaleTypeDict[index].name;
        }

      },
      resultType2Name(type){

        let index = this._.findIndex(this.aftersaleProcessTypeDict,function (item) {
          return type===item.value;
        });

        if (index===-1){
          return '';
        } else{
          return this.aftersaleProcessTypeDict[index].name;
        }

      },

      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      getPackageAftersale(id, orderId){
        getPackageAftersale(this, tiyData, id, orderId);
      },
      toUnReceived(){
        toUnReceived(this, tiyData);
      },
      changeUnreceivedHandlerResult(){
        var unReceived = tiyData.tParams.unReceived;
        if(unReceived.result ==101 && !unReceived.opinion){
          unReceived.opinion = this.aftersaleProcessTypeDict.filter(itemDict => itemDict.value == unReceived.result)[0].enName;
        } else {
          unReceived.opinion = "";
        }
      },
      handlerUnReceived(name){
        handlerUnReceived(this, tiyData, name);
      },
      toAftersaleItem(aftersaleItem){
       toAftersaleItem(this, tiyData, aftersaleItem);
      },
      changeItemHandlerResult(){
        var item = tiyData.tParams.aftersaleItem;
        switch (item.result) {
          case 101:
            item.opinion = this.aftersaleProcessTypeDict.filter(itemDict => itemDict.value == item.result)[0].enName;
            item.refundAmount = item.tempRefundAmount;
            break;
          case 201:
            item.opinion = this.aftersaleProcessTypeDict.filter(itemDict => itemDict.value == item.result)[0].enName;
            item.refundAmount = 0;
            break;
          default:
            item.refundAmount = 0;
            item.opinion = "";
            break;
        }
      },
      handlerAftersaleItem(name){
        handlerAftersaleItem(this, tiyData, name);
      },
      showOrderDetail(id){
          this.orderId = id;
          this.isShowDetail = true;
      },
        hideDetail(){
            this.isShowDetail = false;
            this.orderId = "";
        },
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_form {
    padding: 1rem 2rem;
  }

  .modal_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key{
    min-width: 120px;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}

</style>
